<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />

    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/art-template.js"></script>
    <style>
        #mvTpl {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        ul {
            list-style: none;
            width: 350px;
            height: 130px;
        }

        img {
            width: 110px;
            height: 70px;
        }

        .pg {
            width: 500px;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="pg">
        <input type="button" value="1">
        <input type="button" value="2">
        <input type="button" value="3">
        <input type="button" value="4">
        <input type="button" value="5">
        <input type="button" value="6">
        <input type="button" value="7">
        <input type="button" value="8">
        <input type="button" value="9">
        <input type="button" value="10">
        <input type="button" value="11">
        <input type="button" value="12">
        <input type="button" value="13">
        <input type="button" value="14">
    </div>
    <div class="container input-group">
        <input type="text" class="form-control" id="inp">
        <a class="btn  input-group-addon">搜索</a>
    </div>
    <div class="" id="mvTpl">

    </div>

    <script type="text/html" id="mpvTpl">
            {{each data.vlist}}
            <ul>
                <a href="{{$value.vurl}}" target="_blank">
                    <img src="{{$value.vpic}}">
                </a>
                <li style="font-size: 20px;font-weight:bold;">{{$value.vn}}</li>
                <li style="text-align: left;">概述：{{$value.vt}}</li>
            </ul>
            {{/each}}
    </script>
    <script type="text/html" id="mpvTpl1">
        <ul>
            <a href="{{vurl}}" target="_blank">
                <img src="{{vpic}}">
            </a>
            <li style="font-size: 20px;font-weight:bold;">{{vn}}</li>
            <li style="text-align: left;">概述：{{vt}}</li>
        </ul>
    </script>
</body>

</html>
<script src="./js/jquery.js"></script>
<script>
    let pg = 1;
    $('.pg>input').on('click', function () {
        pg = $(this).val();
        $.ajax({
            type: 'get',
            url: 'http://cache.video.iqiyi.com/jp/avlist/202861101/' + pg + '/',
            dataType: 'jsonp',
            success: function (res) {
                var htmlStr = template('mpvTpl', res);
                $('#mvTpl').html(htmlStr)
            }
        })
    })
    $.ajax({
        type: 'get',
        url: 'http://cache.video.iqiyi.com/jp/avlist/202861101/1/',
        dataType: 'jsonp',
        success: function (res) {
            var htmlStr = template('mpvTpl', res);
            $('#mvTpl').html(htmlStr)
        }
    })
    $('#inp').on('keyup', function () {
        var lp = $('#inp').val();
        console.log(lp.length);
        console.log(pg);
        if (lp.length == 0) {
            $.ajax({
                type: 'get',
                url: 'http://cache.video.iqiyi.com/jp/avlist/202861101/' + pg + '/',
                dataType: 'jsonp',
                success: function (res) {
                    var htmlStr = template('mpvTpl', res);
                    $('#mvTpl').html(htmlStr)
                }
            })
        }
        $.ajax({
            type: 'get',
            url: 'http://cache.video.iqiyi.com/jp/avlist/202861101/' + pg + '/',
            dataType: 'jsonp',
            success: function (res) {
                let pg1 = pg - 1;
                var pg2 = pg1 * 75;
                if (lp > pg2 && lp < pg2 + 75) {
                    var jishu = lp - pg1 * 75;
                    var htmlStr1 = template('mpvTpl1', res.data.vlist[jishu - 1]);
                    $('#mvTpl').html(htmlStr1)
                } else {
                    $.ajax({
                        type: 'get',
                        url: 'http://cache.video.iqiyi.com/jp/avlist/202861101/' + pg + '/',
                        dataType: 'jsonp',
                        success: function (res) {
                            var htmlStr = template('mpvTpl', res);
                            $('#mvTpl').html(htmlStr)
                        }
                    })
                }


            }
        })
    })

</script>